<template>
  <view class="content">
    <!--		<u-sticky h5-nav-height="0">-->
    <!--			<view class="tabs u-flex">-->
    <!--				<view style="width: 100%;">-->
    <!--					<u-tabs-swiper-->
    <!--						ref="tabs"-->
    <!--						:list="tabList"-->
    <!--						:current="current"-->
    <!--						active-color="#0079ff"-->
    <!--						inactive-color="#262626"-->
    <!--						bar-width="60"-->
    <!--						@change="change"-->
    <!--						:is-scroll="false"-->
    <!--						swiperWidth="750">-->
    <!--					</u-tabs-swiper>-->
    <!--				</view>-->
    <!--			</view>-->
    <!--		</u-sticky>-->
    <!--    <swiper class="swiper-box" :current="swiperCurrent" @transition="transition" @animationfinish="animationfinish">-->
    <swiper-item class="swiper-item">
      <scroll-view scroll-y style="height: 100%;width: 100%;">

        <view class="version u-flex u-row-between u-flex-wrap">
          <view v-for="(key,index) in operationVersionList" :key="index" class="version-item u-flex u-row-center"
                @click="toDetail(key)">
            <view class="name black-text">{{ operationData[key].name }}</view>

            <!-- <view class="u-flex u-row-center u-font-24">
              <view class="u-flex">
                <view v-if="operationData[key].open === 0" class="u-text-right blue-text">
                  <text class="u-p-r-8">免费</text>
                </view>
                <view v-else class="u-text-right u-p-r-12 blue-text border-right">
                  <text class="u-p-r-8">首年</text>
                  <text>¥{{ operationData[key].open }}</text>
                </view>
                <view v-if="operationData[key].renew === 0" class="u-text-left">
                  <text class="grey-text">不可入单</text>
                </view>
                <view v-else class="u-p-l-12 u-text-left">
                  <text class="u-p-r-8 grey-text">续费</text>
                  <text>¥{{ operationData[key].renew }}/年</text>
                </view>
              </view>
            </view> -->

          </view>
        </view>

        <view class="u-flex u-row-center u-m-t-36" style="width: 100%;">
          <view class="contrast-btn black-text u-flex u-row-center" @click="toContrast">系统版本对比</view>
        </view>

      </scroll-view>
    </swiper-item>
    <!--      <swiper-item class="swiper-item">-->
    <!--        <scroll-view scroll-y style="height: 100%;width: 100%;">-->

    <!--          <view class="version u-flex u-row-between u-flex-wrap">-->
    <!--            <view v-for="(key,index) in mobileVersionList" :key="index" class="version-item u-flex u-row-center"-->
    <!--                  @click="toMobileDetail(key)">-->
    <!--              <view class="name black-text">{{ mobileData[key].name }}</view>-->

    <!--              &lt;!&ndash; <view class="u-flex u-row-center u-font-24">-->
    <!--                <view class="u-flex">-->
    <!--                  <view class="u-text-right u-p-r-12 blue-text border-right">-->
    <!--                    <text class="u-p-r-8">首年</text>-->
    <!--                    <text>¥{{ mobileData[key].open }}</text>-->
    <!--                  </view>-->
    <!--                  <view class="u-p-l-12 u-text-left">-->
    <!--                    <text class="u-p-r-8 grey-text">续费</text>-->
    <!--                    <text>¥{{ mobileData[key].renew }}/年</text>-->
    <!--                  </view>-->
    <!--                </view>-->
    <!--              </view> &ndash;&gt;-->

    <!--            </view>-->
    <!--          </view>-->

    <!--        </scroll-view>-->
    <!--      </swiper-item>-->
    <!--    </swiper>-->

  </view>
</template>

<script>
import {mobileData, operationData} from '../../static/data/data.js'

export default {
  data() {
    return {
      tabList: [
        {
          name: '运营系统'
        },
        {
          name: '移动端'
        }
      ],
      operationVersionList: [
        'member',
        'basic',
        'startCreation',
        'haircutStandard',
        'complex',
        'headquarters'
      ],
      mobileVersionList: [
        'onlineMall',
        'smallProgram'
      ],
      current: 0,
      swiperCurrent: 0,
      operationData: [],
      mobileData: []
    }
  },
  onLoad() {
    this.operationData = operationData
    this.mobileData = mobileData
    console.log(operationData)
  },
  methods: {
    change(index) {
      this.swiperCurrent = index;
      this.current = index;
    },
    transition({detail: {dx}}) {
      if (this.$refs.tabs)
        this.$refs.tabs.setDx(dx);
    },
    animationfinish({detail: {current}}) {
      if (this.$refs.tabs)
        this.$refs.tabs.setFinishCurrent(current);
      this.swiperCurrent = current;
      this.current = current;
    },
    toDetail(key) {
      this.$u.route('/pages/version-detail/index', {key})
    },
    toMobileDetail(key) {
      this.$u.route('/pages/mobile-detail/index', {key})
    },
    toContrast() {
      this.$u.route('/pages/contrast/index')
    }
  }
}
</script>

<style lang="scss" scoped>
page {
  background-color: #f9fafc;
}

.tabs {
  width: 100%;
  height: 118rpx;
  background-color: #FFFFFF;
  margin-bottom: 14rpx;
}

.swiper-box {
  flex: 1;
  min-height: calc(100vh - 138rpx);
}

.swiper-item {
  height: 100%;
}

.version {
  width: 100%;
  padding: 16rpx 36rpx 0;

  .version-item {
    width: 327rpx;
    height: 180rpx;
    border-radius: 24rpx;
    border: solid 1px #cecfd0;
    margin-bottom: 24rpx;

    .name {
      width: 100%;
      // margin-top: 34rpx;
      font-size: 36rpx;
      font-weight: 600;
      text-align: center;
      // margin-bottom: 18rpx;
    }

    .border-right {
      border-right: 1px solid #cecfd0;
    }
  }
}

.contrast-btn {
  width: 324rpx;
  height: 90rpx;
  font-size: 30rpx;
  border-radius: 6rpx;
  border: solid 1px #cecfd0;
}
</style>
